<template>
  <div style="width: 100%; height: 100%" id="map-container">
    
  </div>
</template>

<script setup>
import { watch, onMounted, ref, onUnmounted } from "vue";
// import waterloggingResponseAPI from "@/api/waterloggingResponse.js";
import L from "leaflet";
import "leaflet/dist/leaflet.css";

const props = defineProps({
  regionCode: {
    type: String,
    required: true,
  },
  center: {
    type: Array,
    required: true,
  },
  lng: {
    type: Number,
    default: () => null,
  },
  // 纬度 latitude
  lat: {
    type: Number,
    default: () => null,
  },
  warningLevel: {
    type: Number,
    default: () => null,
  },
});
let map;

watch(
  () => props.regionCode,
  async (regionCode) => {
    if (regionCode) {
      // const { data } = await waterloggingResponseAPI.getDetailCQWL(regionCode);
      // console.log(data);
      // map.setView([data.lat, data.lnt], 9);
      // const region = JSON.parse(data.region);
      // const geojson = {
      //   type: "FeatureCollection",
      //   features: [{ type: "Feature", properties: {}, geometry: region }],
      // };
      // L.geoJSON(geojson).addTo(map);
      // map._onResize();
    }
  },
  {
    immediate: true,
  }
);

let marker = ref(null);

// function updateMarker(center) {
//   if (!marker.value) {
//     marker.value = L.marker(center, {
//       icon: L.icon({
//         iconUrl: props.warningLevel
//           ? levelObj[props.warningLevel]
//           : require("@/assets/marknew/一般风险.png"), // 自定义图标路径
//         iconSize: [40, 55], // 图标尺寸
//       }),
//     }).addTo(map);
//   } else {
//     marker.value.setLatLng(center);
//   }
// }
const getUrl = (type, key) => {
  const hostname = window.location.hostname;
  if (hostname.includes("23.24.203.124")) {
    return "http://23.24.203.124:8631/tiandituwmts{s}/";
  } else if (hostname.includes("23.35.0.247")) {
    return "http://23.35.0.247:8631/tiandituwmts{s}/";
  }
  return "https://csts.zfcxjw.cq.gov.cn:38001/tiandituwmts{s}/";

  //   return `//t{s}.tianditu.gov.cn/${type}_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=${type}&tileMatrixSet=w&TileMatrix={z}&TileRow={y}&TileCol={x}&style=default&format=tiles&tk=${key}`;
};
onMounted(() => {
  initMap();
});
const initMap = () => {
  const flag = props.lat && props.lng;
  const centerLatlng = [props.lat, props.lng];
  console.log(props.lat, props.lng, "props.lat,props.lng");
  map = L.map("map-container").setView(
    flag ? centerLatlng : [29.555819, 106.565186],
    flag ? 15 : 9
  );
  const tdtUrl = getUrl();
  const token = "3066a90efa9734ea28f5a076287495f6";
  const vec = "DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=";
  const cva = "DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=";
  // 添加天地图底图
  L.tileLayer(tdtUrl + vec + token, {
    subdomains: "123456",
  }).addTo(map);
  // 添加天地图标注
  L.tileLayer(tdtUrl + cva + token, {
    subdomains: "123456",
  }).addTo(map);

  // if (flag) updateMarker(centerLatlng);
};
// 清理地图资源
function cleanupMap() {
  if (map) {
    map = null;
    marker.value = null;
    console.log("地图资源已释放");
  }
}
onUnmounted(() => {
  cleanupMap();
});
</script>

<style scoped></style>
